<template>
    <div>
        <div>
            <el-row>
                <el-col :span="2">
                    <el-button @click="insertStaffView = true" style="margin: 30px 30px" icon="el-icon-plus" type="primary">新增员工</el-button>
                    <el-dialog
                            title="新增员工"
                            :visible.sync="insertStaffView"
                            width="50%"
                            @close="closedDig"
                    >
                        <el-form :model="StaffFrom" :rules="addRules" ref="StaffFrom">
                            <el-row>
                                <el-col :span="14">
                                    <el-form-item label="姓名" prop="name">
                                        <el-input style="width: 75%" v-model="StaffFrom.name" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                    <el-form-item label="职务" prop="rank">
                                        <el-select clearable v-model="StaffFrom.rank" placeholder="选择职务">
                                            <el-option
                                                    v-for="item in tankList"
                                                    :label="item.displayname"
                                                    :value="item.displayname">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="手机号码" prop="phoneNum">
                                        <el-input style="width: 67%" v-model="StaffFrom.phoneNum"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10" :offset="4">
                                    <el-form-item label="性别" prop="sex">
                                        <el-input style="width: 70%" v-model="StaffFrom.sex"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col>
                                    <el-form-item label="身份证号码" prop="cardNum">
                                        <el-input style="width: 70%" v-model="StaffFrom.cardNum"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col>
                                    <el-form-item label="生日" prop="brithDate">
                                        <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="StaffFrom.brithDate"></el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-form-item label="登录账号" prop="loginNum">
                                <el-input  v-model="StaffFrom.loginNum" @blur="selectLogin"></el-input>
                            </el-form-item>
                            <el-form-item label="登录密码" prop="loginPass">
                                <el-input show-password v-model="StaffFrom.loginPass"></el-input>
                            </el-form-item>
                        </el-form>

                        <span slot="footer" class="dialog-footer">
    <el-button @click="insertStaffView = false">取 消</el-button>
    <el-button type="primary" @click="insertStaff('StaffFrom')">确 定</el-button>
  </span>
                    </el-dialog>
                </el-col>
            </el-row>
<!--            修改-->
            <el-dialog
                    title="修改员工"
                    :visible.sync="updateStaffView"
                    width="50%"
                    @close="closedDig"
            >
                <el-form :model="StaffFromUpdate" :rules="updateRules" ref="StaffFromUpdate">
                    <el-row>
                        <el-col :span="14">
                            <el-form-item label="姓名" prop="name">
                                <el-input style="width: 75%" v-model="StaffFromUpdate.name" ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="职务" prop="rank">
                                <el-select clearable v-model="StaffFromUpdate.rank" placeholder="选择职务">
                                    <el-option
                                            v-for="item in tankList"
                                            :label="item.displayname"
                                            :value="item.displayname">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="手机号码" prop="phoneNum">
                                <el-input style="width: 67%" v-model="StaffFromUpdate.phoneNum"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" :offset="4" >
                            <el-form-item label="性别" prop="sex">
                                <el-input style="width: 70%" v-model="StaffFromUpdate.sex"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item label="身份证号码" prop="cardNum">
                                <el-input style="width: 70%" v-model="StaffFromUpdate.cardNum"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col>
                            <el-form-item label="生日" prop="brithDate">
                                <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="StaffFromUpdate.brithDate"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="登录账号" prop="loginNum">
                        <el-input  v-model="StaffFromUpdate.loginNum"></el-input>
                    </el-form-item>
                    <el-form-item label="登录密码" prop="loginPass">
                        <el-input show-password v-model="StaffFromUpdate.loginPass"></el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
    <el-button @click="updateStaffView = false">取 消</el-button>
    <el-button type="primary" @click="updateStaff('StaffFromUpdate')">确 定</el-button>
  </span>
            </el-dialog>
        </div>
        <div>
            <el-table :data="staffList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()) || data.rank.includes(search))">
                <el-table-column type="selection" prop="id" label="编号"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="sex" label="性别"></el-table-column>
                <el-table-column prop="phonenum" label="手机号码"></el-table-column>
                <el-table-column prop="rank" label="职级"></el-table-column>
                <el-table-column prop="loginnum" label="账号"></el-table-column>
                <el-table-column prop="cardnum" label="身份证号码"></el-table-column>
                <el-table-column prop="brithdate" label="生日"></el-table-column>
                <el-table-column sortable prop="createtime" label="创建时间"></el-table-column>
                <el-table-column
                        align="right">
                    <template slot="header" slot-scope="scope">
                        <el-input
                                v-model="search"
                                size="mini"
                                placeholder="输入关键字搜索"/>
                    </template>
                    <template slot-scope="scope">
                        <el-button
                                type="primary" icon="el-icon-edit" circle
                                @click="updateStaffView = true,StaffFromMsg(scope.row)"></el-button>
                        <el-popconfirm
                                placement="top"
                                width="160"
                                v-model="visible"
                                title="确定删除这条数据吗？" @onConfirm="deleteStaff(scope.$index, scope.row)">
                            <el-button slot="reference"type="danger" icon="el-icon-delete" circle></el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    export default {
        name: "StaffManger",
        data(){
        var nameValdate = (rule, value, callback)=>{
            value = value.replace(/\s*/g,"");
            if (value !==''){
                var params = new URLSearchParams;
                params.append('name',value);
                this.$axios.post('staff/loginName',params).then(req=>{
                    console.log(req);
                   if (req.data ===''){
                       callback();
                   }else {
                       return callback(new Error("该账号已注册"));
                   }
                });
            }else {
                return  callback(new Error('账号名不能为空'));
            }
        };
            return{
                staffList:[],
                tankList:[],
                search: null,
                visible:false,
                insertStaffView:false,
                updateStaffView:false,
                StaffFrom:{
                    name:'',
                    sex:'',
                    phoneNum:'',
                    rank:'',
                    loginNum:'',
                    loginPass:'',
                    cardNum:'',
                    brithDate:'',
                },
                addRules:{
                    name:[
                        {
                            required:true,
                            message: '姓名不能为空',
                            trigger:'blur',

                        }
                    ],
                    sex:[
                        {
                            required:true,
                            message: '性别不能为空',
                            trigger:'blur'
                        }
                    ],
                    phoneNum:[
                        {
                            required:true,
                            message: '手机号码不能为空',
                            trigger:'blur'
                        }
                    ],
                    rank:[
                        {
                            required:true,
                            message: '职务不能为空',
                            trigger:'blur'
                        }
                    ],
                    loginNum:[
                        {
                            required:true,
                            // message: '账号不能为空',
                            trigger:'blur',
                            validator:nameValdate
                        }
                    ],
                    loginPass:[
                        {
                            required:true,
                            message: '密码不能为空',
                            trigger:'blur'
                        }
                    ],
                    cardNum:[
                        {
                            required:true,
                            message: '身份证不能为空',
                            trigger:'blur'
                        }
                    ],
                    brithDate:[
                        {
                            required:true,
                            message: '生日也不能为空',
                            trigger:'blur'
                        }
                    ],
                },
                updateRules:{
                    name:[
                        {
                            required:true,
                            message: '姓名不能为空',
                            trigger:'blur',

                        }
                    ],
                    sex:[
                        {
                            required:true,
                            message: '性别不能为空',
                            trigger:'blur'
                        }
                    ],
                    phoneNum:[
                        {
                            required:true,
                            message: '手机号码不能为空',
                            trigger:'blur'
                        }
                    ],
                    rank:[
                        {
                            required:true,
                            message: '职务不能为空',
                            trigger:'blur'
                        }
                    ],
                    loginNum:[
                        {
                            required:true,
                            message: '账号不能为空',
                            trigger:'blur',
                        }
                    ],
                    loginPass:[
                        {
                            required:true,
                            message: '密码不能为空',
                            trigger:'blur'
                        }
                    ],
                    cardNum:[
                        {
                            required:true,
                            message: '身份证不能为空',
                            trigger:'blur'
                        }
                    ],
                    brithDate:[
                        {
                            required:true,
                            message: '生日也不能为空',
                            trigger:'blur'
                        }
                    ],
                },
                StaffFromUpdate:{
                    id:'',
                    name:'',
                    sex:'',
                    phoneNum:'',
                    rank:'',
                    loginNum:'',
                    loginPass:'',
                    cardNum:'',
                    brithDate:'',
                }
            }
        },
        methods:{
            selectLogin(){
                var params = new URLSearchParams;
                params.append('name',this.StaffFrom.loginNum);
                this.$axios.post('staff/loginName',params).then(req=>{
                    console.log(req);
                })
            },
            tankShow:function(){
                this.$axios.post('posit/tank').then(req=>{
                    this.tankList.length=0;
                    req.data.forEach(rank=>this.tankList.push(rank));
                })
            },
            staffShow:function () {
                this.$axios.post('staff/list').then(req=>{
                    console.log(req.data);
                    req.data.forEach(satff=>{this.staffList.push(satff)});
                })
            },
            deleteStaff(index,row){
                var params = new URLSearchParams();
                params.append('id',row.id);
                this.staffList.length=0;
                this.$axios.post('/staff/delete',params).then(req=>{
                    req.data.forEach(food=>{this.staffList.push(food)});
                });
                console.log(row);
                if (this.staffList !==0){
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                }else {this.$message.error('删除失败');}
            },
            closedDig(){
                this.StaffFrom.name='';
                this.StaffFrom.sex='';
                this.StaffFrom.phoneNum='';
                this.StaffFrom.rank='';
                this.StaffFrom.loginNum='';
                this.StaffFrom.loginPass='';
                this.StaffFrom.cardNum='';
                this.StaffFrom.brithDate='';
            },
            insertStaff(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post('staff/insert',{
                            'name':this.StaffFrom.name,
                            'sex':this.StaffFrom.sex,
                            'phonenum':this.StaffFrom.phoneNum,
                            'rank':this.StaffFrom.rank,
                            'loginnum':this.StaffFrom.loginNum.replace(/\s*/g,""),
                            'loginpass':this.StaffFrom.loginPass,
                            'cardnum':this.StaffFrom.cardNum,
                            'brithdate':this.StaffFrom.brithDate
                        }).then(req=>{
                            this.insertStaffView = false;
                            this.staffList.length=0;
                            req.data.forEach(staf=>{this.staffList.push(staf)});
                            this.$message.success("添加成功")
                        })
                    } else {
                        this.$message.error("验证失败")
                        return false;
                    }
                });

            },
            StaffFromMsg(row){
                    this.StaffFromUpdate.id=row.id,
                    this.StaffFromUpdate.name=row.name,
                    this.StaffFromUpdate.sex=row.sex,
                    this.StaffFromUpdate.phoneNum=row.phonenum,
                    this.StaffFromUpdate.rank=row.rank,
                    this.StaffFromUpdate.loginNum=row.loginnum,
                    this.StaffFromUpdate.loginPass=row.loginpass,
                    this.StaffFromUpdate.cardNum=row.cardnum,
                    this.StaffFromUpdate.brithDate=row.brithdate
            },
            updateStaff(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post('staff/update',{
                            'id':this.StaffFromUpdate.id,
                            'name':this.StaffFromUpdate.name,
                            'sex':this.StaffFromUpdate.sex,
                            'phonenum':this.StaffFromUpdate.phoneNum,
                            'rank':this.StaffFromUpdate.rank,
                            'loginnum':this.StaffFromUpdate.loginNum.replace(/\s*/g,""),
                            'loginpass':this.StaffFromUpdate.loginPass,
                            'cardnum':this.StaffFromUpdate.cardNum,
                            'brithdate':this.StaffFromUpdate.brithDate
                        }).then(req=>{
                            this.staffList.length=0;
                            this.updateStaffView = false;
                            req.data.forEach(staf=>{this.staffList.push(staf)});
                            this.$message.success("修改成功")
                        })
                    } else {
                        this.$message.error("验证失败");
                        return false;
                    }
                });
            },
        },
        mounted() {
            this.staffShow();
            this.tankShow();
        }
    }
</script>

<style scoped>

</style>